<template>
  <div>
    <Collapse value="0" accordion>
      <Panel>
        基础配置
        <div slot="content">
          <Form :label-width="80">
            <FormItem label="地图类型">
              <Select :transfer="true" size="small" v-model="mapOption.mapType">
                <Option v-for="item in mapTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="地图缩放">
              <Tooltip content="如果地图需要配置3D视角的俯仰角度，那么建议缩放设置在5至以上" :max-width="200" placement="left">
                <InputNumber size="small" :max="20" :min="3" v-model="mapOption.zoom" :active-change="false"></InputNumber>
              </Tooltip>
            </FormItem>
            <FormItemPanel title="地图中心">
              <FormItem label="城市名">
                <Tooltip content="通过填写城市名称决定地图中心定位，注意：必须是城市名，例如南宁市、北京市等，设置了城市名之后，配置的经度与纬度将会失效，城市名的优先级为最高"
                         :max-width="200" placement="left" class="w-full">
                  <Input size="small" v-model="centerCityInputData" placeholder="例：南宁市" @on-blur="centerCityInputBlurHandler"/>
                </Tooltip>
              </FormItem>
              <FormItem label="经度">
                <InputNumber size="small" :max="180" :min="-180" v-model="mapOption.center[0]" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="纬度">
                <InputNumber size="small" :max="90" :min="-90" v-model="mapOption.center[1]" :active-change="false"></InputNumber>
              </FormItem>
            </FormItemPanel>
            <FormItemPanel title="3D视角">
              <FormItem label="旋转角度">
                <InputNumber size="small" :max="180" :min="-180" :step="10" v-model="mapOption.heading" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="俯仰角度">
                <Tooltip content="配置俯仰角度，建议将地图的缩放级别设置到6以上，否则将几乎看不到任何效果" :max-width="200" placement="left">
                  <InputNumber size="small" :max="80" :min="0" :step="10" v-model="mapOption.tilt" :active-change="false"></InputNumber>
                </Tooltip>
              </FormItem>
              <FormItem label="天空颜色">
                <Tooltip class="w-full" content="设置了俯仰角时会显示" :max-width="200" placement="left">
                  <PnColorPicker size="small" v-model="mapOption.skyColors[0]" alpha recommend/> =>
                  <PnColorPicker size="small" v-model="mapOption.skyColors[1]" alpha recommend/>
                </Tooltip>
<!--                <Tooltip content="天空颜色，3D模式下带有俯仰角时会显示" max-width="200" placement="left">
                  <PnColorPicker size="small" v-model="mapOption.skyColor" alpha recommend/>
                </Tooltip>-->
              </FormItem>
            </FormItemPanel>
          </Form>
        </div>
      </Panel>
      <Panel>
        主题配置
        <div slot="content">
          <Alert show-icon style="padding-right: 10px; text-align: justify">
            主题JSON数据请自行前往百度地图开发者中心个性化地图编辑平台中进行配置获取，如果不配置，将使用本平台默认的暗黑色系主题
          </Alert>
          <CodeEditor v-model="mapOption.styleJson" mode="json"></CodeEditor>
        </div>
      </Panel>
      <Panel>
        地图交互
        <div slot="content">
          <Form :label-width="120">
            <FormItem label="开启地图拖拽">
              <i-switch v-model="mapOption.dragging"></i-switch>
            </FormItem>
            <FormItem label="开启滚轮放大缩小">
              <i-switch v-model="mapOption.scrollWheelZoom"></i-switch>
            </FormItem>
            <FormItem label="开启双击放大">
              <i-switch v-model="mapOption.doubleClickZoom"></i-switch>
            </FormItem>
          </Form>
        </div>
      </Panel>
    </Collapse>

  </div>
</template>

<script>

export default {
  name: "BMapOptionConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      mapOption: this.value,

      centerCityInputData: '',

      mapTypes: [
        {label: '普通街道视图', value: 'BMAP_NORMAL_MAP'},
        {label: '卫星视图', value: 'BMAP_SATELLITE_MAP'},
        {label: '卫星和路网混合视图', value: 'BMAP_HYBRID_MAP'},
        {label: '地球视图', value: 'BMAP_EARTH_MAP'}
      ]
    }
  },
  mounted() {
    this.centerCityInputData = this.mapOption.centerCity
  },
  methods: {
    centerCityInputBlurHandler () {
      this.mapOption.centerCity = this.centerCityInputData
    }
  },
  computed: {},
  watch: {
    value (val) {
      this.mapOption = val;
    }
  }
}
</script>

<style lang="less" scoped>

</style>
